<template>
    <div id="suggest-feegback">
        <!-- 设计师 - 建议反馈 -->
        <div class="deposit-content">
            <div class="top-bg">
                <van-nav-bar class="header" fixed :border="false" @click-left="diffBack">
                        <div class="left"
                            slot="left">
                            <van-icon name="arrow-left"
                                    size="24px"
                                    color="#fff" />
                        </div>
                        <div class="title"
                            slot="title">{{title}}</div>
                    </van-nav-bar>
            </div>
            <div class="reset-wrapper">
                <div class="reset-content">
                   <div class="textarea-case bgwrite">
                     <div class="text-header">
                       <div>反馈详情</div>
                       <div class="header-right">{{inputValue.length}}/200</div>
                     </div>
                     <div class="textarea-content">
                       <textarea  v-model="inputValue" maxlength=200 placeholder="请输入详细内容" ref="focusContent" @click="inputFocus"/>
                     </div>
                   </div>
                   <!-- <div class="input-case bgwrite">
                     <input type="text" class="input-content" placeholder="请输入接收回信邮箱">
                   </div> -->
                </div>
            </div>
            <div class="footer-btn bgwrite">
                <div class="btn-pay" @click="toApplyI">提交</div>
            </div>
      </div>
    </div>
</template>
<script>
import {getuserUid} from '@/utils/auth.js'
import { noEmoji } from "@/utils/noEmoji";
export default {
  components: {
  },
  data() {
    return {
      title: '建议反馈',
      inputValue: "",
      emoji: false
    }
  },
  created() {
  },
  methods: {
    // input focus
    inputFocus() {
      this.$refs.focusContent.focus()
    },
    diffBack() {
        this.$router.push('/designer/personalCenter')
    },
    // 提交并且过滤emoji
    toApplyI () {
      if(!this.inputValue ||/^\s*$/.test(this.inputValue)) {
        this.$toast('反馈详情不能为空哦')
        this.inputValue = ""
        return false
      } else if (this.inputValue !== "") {
        for (let i of this.inputValue) {
          if (noEmoji(i)) {
            this.emoji = true;
            break;
          } 
        }
        if (this.emoji) {
          this.emoji=false
          this.inputValue = ""
          this.$toast('内容只限数字，中文，英文哦~~')
          return false
        } else {
          this.addBfeedback()
        }
      }
    },
    // 添加建议反馈
    async addBfeedback() {
      const SPC = await HTTP("addBfeedback", {
        userUid: getuserUid(),
        content: this.inputValue
      });
      if (SPC.code == 200) {
        const toast = this.$toast.success({
          duration: 2000,       // 持续展示 toast
          forbidClick: true, // 禁用背景点击
          message: '感谢您对图小助的支持，我们将尽快处理'
        });
        let second = 2;
        const timer = setInterval(() => {
          second--;
          if (!second) {
            clearInterval(timer);
            this.$toast.clear();
            this.$router.push('/designer/personalCenter')
          }
        }, 1000);
      } else {
        this.$toast(SPC.msg|| '服务器异常')
      }
    }
  }
};
</script>
<style lang="scss" scoped>
#suggest-feegback {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #F9F9F9;
    .deposit-content{
        position: relative;
        width: 100%;
        height: 100%;
        .top-bg{
            width: 100%;
            background: #fff;
            border-bottom-left-radius: 0.5rem;
            border-bottom-right-radius: 0.5rem;
            .header {
                background: #5E8EFE;
                color: #ffffff;
                height: 0.92rem;
                .title {
                    color: #ffffff;
                    font-size: 0.35rem;
                    }
            }
        }
        .reset-wrapper{
            position: fixed;
            width: 100%;
            padding: 0.24rem;
            box-sizing: border-box;
            top: 0.92rem;
            left: 0;
            right: 0;
            overflow-y: scroll;
            bottom: 1.6rem;
            .reset-content{
                width: 100%;
                .input-case{
                  width: 100%;
                  height: 1rem;
                  box-sizing: border-box;
                  padding: 0 0.24rem;
                  border-radius: 0.1rem;
                  margin-bottom: 0.24rem;
                  input{
                    width: 100%;
                    height: 1rem;
                    line-height: 1rem;
                    color: #282828;
                    border: none;
                    font-size: 0.28rem;
                    &::-webkit-input-placeholder{
                      color: #CCCCCC;
                    }
                  }
                }
                .textarea-case{
                  margin-bottom: 0.24rem;
                  .text-header{
                    box-sizing: border-box;
                    width: 100%;
                    height: 0.64rem;
                    border-bottom: 0.01rem solid #F9F9F9;
                    color: #959595;
                    line-height: 0.64rem;
                    padding-left: 0.24rem;
                    font-family: PingFangSC-Regular;
                    font-weight: 400;
                    font-size: 0.24rem;
                    div{
                      display: inline-block;
                      width: 50%;
                    }
                    .header-right{
                      box-sizing: border-box;
                      text-align: right;
                      padding-right: 0.24rem;
                    }
                  }
                  .textarea-content{
                    padding: 0.24rem;
                    textarea{
                      width: 100%;
                      height: 2rem;
                      line-height: 0.44rem;
                      color: #282828;
                      border: none;
                      font-size: 0.28rem;
                      &::-webkit-input-placeholder{
                        color: #CCCCCC;
                      }
                    }
                  }
                }
            }
        }
        .footer-btn{
            position: fixed;
            bottom:0;
            left: 0;
            width: 100%;
            padding: 0.36rem 0.24rem;
            box-sizing: border-box;
            height: 1.6rem;
            box-shadow:0 0.02rem 0.04rem 0 #E5E5E5;
            line-height: 1.6rem;
            .btn-pay{
                width: 100%;
                height: 0.88rem;
                background: #5E8EFE;
                border-radius: 0.1rem;
                text-align: center;
                line-height: 0.88rem;
                color: #FFFFFF;
                font-family: PingFangSC-Semibold;
                font-weight: 600;
                font-size: 0.26rem;
            }
        }
    }
}
</style>
